import React, { memo ,useEffect} from 'react'
import {  useSelector,useDispatch, shallowEqual } from 'react-redux';
import { HotRecommendWrapper } from "./style";
import { getHotRecommendAction } from "../../store/actionCreator";
import HjThemeHeaderRCM from "@/components/theme-header-rcm/index";
import HjSongsCover from "@/components/songs-cover";

export default memo(function HjHotRecommend() {

  const dispatch = useDispatch()

  const {hotRecommends} = useSelector(state => ({
      hotRecommends:state.getIn(['recommend','hotRecommends'])
    }),shallowEqual)

  useEffect(() => {
    dispatch(getHotRecommendAction(8))
  }, [dispatch]);

  const keyword=  ["华语","流行","摇滚","民谣","电子"]

  return (
    <HotRecommendWrapper>
      <HjThemeHeaderRCM title="热门推荐" keyword={keyword}/>
        <div className="recommend-list">
          {
          hotRecommends.map((item,index)=>{
            return (
              <a href="/#" title={item.name}  key={item.id}>
                <HjSongsCover key={item.id} info={item}/>
              </a>
            )
          })
        }
        </div>
    </HotRecommendWrapper>
  )
})
